+(function () {
    var $form_add_task = $('.add-task'),
        $body = $('body'),
        $window = $(window),
        task_list = [], //本地存储
        $delete_button = '', //删除按钮
        $detail_button = '', //详情按钮
        $task_detail = $('.task-detail'), //右侧容器
        $updata_form, //右侧容器里面一层
        $task_item,
        $checkbox_complete,
        $task_detail_content, //双击要变成input框的元素
        $task_detail_mask = $('.task-detail-mask'), //遮罩层
        $msg = $('.msg'),
        $msg_content = $msg.find('.msg-content'),
        $msg_confirm = $msg.find('.confirmed'),
        $alert = $('.alert');



    init()

    function pop(arg) {
        if (!arg) {
            console.log('pop title is required')
        }
        // var 
        var conf = {},
            $box,
            $mask,
            $title,
            $confirm,
            $cancel,
            dfd,
            confirmed,
            timer;
        // 在函数内部创建一个deferred对象，他的执行状态就不会在外部被改变了
        dfd = $.Deferred()


        if (typeof arg == 'string') {
            conf.title = arg
        } else {
            conf = $.extend(conf, arg)
        }

        $box = $('<div>' +
                '<div class="pop-title">' + conf.title + '</div>' +
                '<div class="pop-content">' +
                '<div>' +
                '<button style="margin-right:15px" class="primary confirm">确定</button>' +
                '<button class="cancel">取消</button>' +
                '</div>' +
                ' </div>' +
                '</div>')
            .css({
                color: '#444',
                width: 300,
                height: 'auto',
                padding : '15px 10px',
                background: '#fff',
                position: 'fixed',
                'border-radius': 3,
                'box-shadow': '0 1px 2px rgba(0,0,0,.5)'
            })

        $title = $box.find('.pop-title').css({
            padding: '5px 10px',
            'font-weight': 900,
            'font-size': 20,
            'text-align': 'center'
        })

        $content = $box.find('.pop-content').css({
            padding: '5px 10px',
            'font-weight': 900,
            'text-align': 'center'
        })

        $confirm = $content.find('button.confirm')
        $cancel = $content.find('button.cancel')

        timer = setInterval(function () {
            if (confirmed !== undefined) {
                dfd.resolve(confirmed)
                clearInterval(timer)
                dismiss_pop()
            }
        }, 50)

        $confirm.on('click', function () {
            confirmed = true
        })
        $cancel.on('click', function () {
            confirmed = false
        })

   
       

        //点击确定或者取消了 把弹出框从文档流中删除
        function dismiss_pop() {
            $mask.remove()
            $box.remove()
        }

        $mask = $('<div></div>').css({
            position: 'fixed',
            background: 'rgba(0,0,0,.5)',
            top: 0,
            bottom: 0,
            left: 0,
            right: 0
        })

        // 调整弹出框的位置
        function adjust_box_position() {
            var window_width = $window.width(),
                window_height = $window.height(),
                box_width = $box.width(),
                box_height = $box.height(),
                move_x = (window_width - box_width) / 2,
                move_y = ((window_height - box_height) / 2) - 20;

            // 重新定义box的left和top
            $box.css({
                left: move_x,
                top: move_y
            })

        }

        $window.on('resize', function () {
            adjust_box_position()
        })

     $mask.on('click', function () {
            confirmed = false
        })

        $body.append($mask)
        $body.append($box)
        $window.resize()
        return dfd.promise()
    }

    /* form表单的submit事件 */
    $form_add_task.on('submit', function (e) {
        e.preventDefault()
        // 点击提交的时候获取input的值 存入对象
        var new_task = {};
        new_task.content = $(this).find('input[name=content]').val()
        // 如果为空则return
        if (!new_task) return
        // 存入task 
        if (add_task(new_task)) {
            //    添加成功了 更新首页的列表
            render_task_list()
            $(this).find('input[name=content]').val('')
        }
    })

    $task_detail_mask.on('click', function () {
        hide_task_detail()
    })


    /* 显示右侧容器 */
    function show_task_detail(index) {
        $task_detail.show()
        $task_detail_mask.show()
    }
    /* 隐藏右侧容器 */
    function hide_task_detail(index) {
        $task_detail.hide();
        $task_detail_mask.hide();
    }
    // 渲染task-detail 的详细信息
    function render_task_detail(index) {
        if (index === undefined || !task_list[index]) return
        var item = task_list[index];
        var tmp1 =
            '<form>' +
            '   <div class="content input-item">' + item.content + '</div>' +
            '   <div class="input-item"><input name="content" type="text" value="' + (item.content || '') + '"/></div>' +
            '   <div class="input-item">' +
            '       <div class="desc">' +
            '            <textarea name="desc">' + (item.desc || '') + '</textarea>' +
            '        </div>' +
            '   </div>' +
            '   <div class="remind">' +
            '       <label class="label-time">提醒时间</label>' +
            '       <input class="datetime input-item " name="remind_date" type="text" value="' + (item.remind_date || '') + '">' +
            '       <button type="submit input-item ">更新</button>' +
            '   </div>' +
            ' </form>'
        $task_detail.html($(tmp1))

        $updata_form = $task_detail.find('form');
        $task_detail_content = $updata_form.find('.content');
        $('.datetime').datetimepicker();

        // 点击更新右侧容器的美容并且要保存到store里面
        $updata_form.on('submit', function (e) {
            e.preventDefault()
            var data = {}
            data.content = $(this).find('[name=content]').val()
            data.desc = $(this).find('[name=desc]').val()
            data.remind_date = $(this).find('[name=remind_date]').val()
            // 需要更新localstorage了
            update_task(index, data)
            // 点击更新完之后关闭 右侧内容区
            hide_task_detail()
        })

        $task_detail_content.on('dblclick', function () {
            $(this).hide()
            $updata_form.find('[name=content]').show();
        })
    }

    // 修改右侧内容区的时候更新本地存储
    function update_task(index, data) {
        if (!task_list[index]) return
        task_list[index] = $.extend({}, task_list[index], data);
        store.set('task_list', task_list);
        render_task_list();
    }

    /*详情按钮的事件  */
    function listen_task_detail() {
        $detail_button.on('click', function () {
            var index = $(this).parents('.task-item').data('index')
            show_task_detail();
            render_task_detail(index); //渲染容器里面的内容
        })
    }

    /* 删除按钮的事件 需要每次渲染的时候去手动绑定事件 */
    function listen_task_delete() {
        $delete_button.on('click', function () {
            var index = $(this).parents('.task-item').data('index');
            var tmp = pop('确定要删除吗?').then(function (r) {
                r ? 　delete_task(index) : null;
            })
            //g更新本地存储并重新渲染数据
            store.set('task_list', task_list)
            render_task_list();
        })
    }
    // task-item的双击事件
    function listen_task_item_dbl() {
        $task_item.on('dblclick', function () {
            var index = $(this).data('index')
            /* 显示右侧内容区并渲染数据 */
            show_task_detail();
            render_task_detail(index)
        })
    }
    // listen_checkbox_complet 监听完成任务事件
    function listen_checkbox_complete() {
        $checkbox_complete.on('click', function () {
            var $this = $(this)
            var index = $this.parents('.task-item').data('index')
            var item = store.get('task_list')[index]
            if (item && item.complete) {
                update_task(index, {
                    complete: false
                })
            } else {
                update_task(index, {
                    complete: true
                })
            }
        })
    }


    function add_task(new_task) {

        task_list.push(new_task)
        store.set('task_list', task_list)
        return true
    }

    function delete_task(index) {
        if (index === undefined || !task_list[index]) return
        delete task_list[index];
        // 更新localstorage
        store.set('task_list', task_list);
        render_task_list();
    }

    /* 页面初始化执行 */
    function init() {
        task_list = store.get('task_list') || [];
        listen_msg_event()
        // store.clearAll()
        if (task_list.length) {
            render_task_list()
        }
        task_remind_check()
    }

    function listen_msg_event() {
        $msg_confirm.on('click', function () {
            hide_msg()
        })
    }

    // 检测时间 定时提醒

    function task_remind_check() {
        var current_timestamp;
        var itl = setInterval(function () {
            for (var i = 0; i < task_list.length; i++) {
                var item = store.get('task_list')[i],
                    task_timestamp;
                if (!item || !item.remind_date || item.informed)
                    continue;
                current_timestamp = (new Date()).getTime();
                task_timestamp = (new Date(item.remind_date)).getTime();
                if (current_timestamp - task_timestamp >= 1) {
                    update_task(i, {
                        informed: true
                    });
                    show_msg(item.content);
                }
            }
        }, 300);
    }

    function show_msg(msg) {
        if (!msg) return
        $msg_content.html(msg)
        $alert.get(0).play()
        $msg.show()
    }

    function hide_msg() {
        $('.msg').hide()
    }

    /* 遍历所有的本地存储渲染task-item 然后插入到task-list*/
    function render_task_list() {
        var $task_list = $('.task-list');
        $task_list.html('')
        var complete_items = [];
        var arr = []
        for (var i = 0; i < task_list.length; i++) {
            var item = task_list[i]
            if (item && item.complete) {
                complete_items.push(item)
                arr.push(i)
            } else {
                var $task = render_task_item(task_list[i], i)
                $task_list.prepend($task)
            }
            /* 传入i 是为删除做准备 获取这个tasj-item对应的index 然后删除 */
        }
        for (j = 0; j < complete_items.length; j++) {
            $task = render_task_item(complete_items[j], arr[j])
            $task.addClass('completed')
            $task_list.append($task)
        }
        /* 页面只有渲染完才能找到到删除按钮 详情按钮 */
        $delete_button = $('.action.delete');
        $detail_button = $('.action.detail');
        $task_item = $('.task-item')
        $checkbox_complete = $('.task-item .complete')
        /* 页面渲染了重新给删除按钮 详情按钮添加事件 */
        listen_task_delete()
        listen_task_detail()
        listen_checkbox_complete()
        listen_task_item_dbl() //列表双击事件

    }


    // 渲染一条task-item
    function render_task_item(data, index) {
        if (!data) return
        var list_item_item =
            '<div class="task-item" data-index="' + index + '">' +
            ' <span><input type="checkbox" class="complete" ' + (data.complete ? 'checked' : '') + ' ></span>' +
            ' <span class="task-content">' + data.content + '</span>' +
            '<span class="fr">' +
            ' <span class="action delete">删除</span>' +
            ' <span class="action detail">详细</span>' +
            '</span>' +
            '</div>';
        return $(list_item_item)
    }


})()